<script>
import OfdReaderFactory from '@/utils/OfdReaderFactory'
import { Button } from 'element-ui-for-gov'
import html2canvas from 'html2canvas'
import formatTime, { sleepSeconds, } from '@/utils/dateFormat'
import {uniqId} from "@/utils/uuid";
export default {
  name: 'App',
  components: {
    [Button.name]: Button,
  },
  data() {
    return {
      ofdReader: null,
      // 手写签名图片
      signPic: '',
      opinionForm: {
        text: '',
        userName: 'HWSEALDEMO**',
        time: '',
      },
    }
  },
  mounted() {
    const ofdReader = OfdReaderFactory({
      id: 'ofd_div',
    })
    if (!ofdReader) {
      console.log('插件加载失败！')
      return
    }

    ofdReader.setUserInfo({
      userId: '3A38E8793A2F4337B9350ADE8807271C',
      userName: 'HWSEALDEMO**',
    })
    ofdReader.setRequestHeader('Cookie', 'smart-link-auth=6fb9d99e-df20-4017-9063-710d528a0b23')

    // 换成本地启动的后端文件服务ip
    ofdReader.openFile('http://10.208.55.70:3000/download?filename=429ad0ab8bef46f5bc23bf95cdc65c3b.ofd', false).then(() => {
      // ofdReader.setCompositeVisible([
      //   'toolbar',
      //   'navigator',
      // ], false)

      ofdReader.setContextMenuVisible([
        'stamp', // 橡皮图章
        'handtool', // 手写签批
        'handtool_eraser', // 橡皮擦
        'handtool_freetext', // 文本框工具
        'handtool_delAllAnnot', // 清空全部注释
      ], false)
    })

    this.ofdReader = ofdReader
  },
  methods: {
    formatTime,
    async handleSave() {
      // 换成本地启动的后端文件服务ip
      await this.ofdReader.saveFile(
          'http://10.208.55.70:3000/uploadFile'
      )
    },
    handleClose() {
      this.ofdReader.closeFile()
    },
    handleGetAnnot() {
      const annotations = this.ofdReader.getAnnotations()
      console.log(annotations)
    },
    async handleAddAnnot() {
      this.opinionForm.text = '测试批示意见'
      this.opinionForm.time = Date.now()
      await sleepSeconds(300)
      const scale = 6
      // 意见+签名 合成图片
      const canvas = await html2canvas(this.$refs.opinion, {
        useCORS: true,
        scale,
        allowTaint: true,
        backgroundColor: null,
      })
      console.log('canvas', canvas)
      const imgData = canvas.toDataURL('image/png', 1)
      // 添加图片
      const imgDataStream = imgData.split('base64,')[1]
      const stampId = uniqId('stampAnnot_')
      const canvasWidth = Math.round(canvas.width * (0.25 / scale))
      const canvasHeight = Math.round(canvas.height * (0.25 / scale))
      this.ofdReader.addAnnotation({
        image: imgDataStream,
        name: stampId,
        width: canvasWidth,
        height: canvasHeight,
        cx: 20,
        cy: 20,
        page: 1,
      })
      this.ofdReader.gotoDest(1, 20, 20)
    },

    async handleAddAnnotByArea() {
      const annotations = this.ofdReader.getAnnotationsByArea({
        width: 210,
        height: 200,
        cx: 20,
        cy: 20,
        page: 1,
      })
      console.log(annotations)
    },

    async handleDelAnnot() {
      const annotations = this.ofdReader.getAnnotations()
      console.log(annotations)
      await this.ofdReader.deleteAnnotation(annotations[0].name)
    },

    gotoDest() {
      this.ofdReader.gotoDest(1, 0, 0)
    },
    print() {
      this.ofdReader.printFile(true)
    },
    download() {
      this.ofdReader.downloadGrayFile('测试.ofd')
    },
    signSeal() {
      this.ofdReader.signSeal()
    },
    zoomIn() {
      this.ofdReader.zoom('in')
    },
    zoomOut() {
      this.ofdReader.zoom('out')
    },
    setScale(num) {
      this.ofdReader.setZoomRatio(num)
    },
    destroyReader() {
      this.ofdReader.destroy()
    },
  },
}
</script>

<template>
  <div style="display: flex">
    <div style="display: flex; flex-direction: column; padding-right: 10px; padding-top: 10px">
      <el-button @click="handleSave">保存</el-button>
      <el-button @click="handleClose">关闭文件</el-button>
      <el-button @click="handleGetAnnot">获取批注</el-button>
      <el-button @click="handleAddAnnot">录入批注</el-button>
      <el-button @click="handleDelAnnot">删除批注</el-button>
      <el-button @click="handleAddAnnotByArea">获取区域内的批注</el-button>
      <el-button @click="gotoDest">跳转页面位置</el-button>
      <el-button @click="print">打印</el-button>
      <el-button @click="download">下载到本地</el-button>
      <el-button @click="signSeal">盖章</el-button>
      <el-button @click="zoomIn">放大</el-button>
      <el-button @click="zoomOut">缩小</el-button>
      <el-button @click="setScale(100)">设置原始比例</el-button>
      <el-button @click="destroyReader()">销毁</el-button>
    </div>

    <div id="ofd_div" style="width: 100%; height: 800px"></div>

    <div ref="opinion" class="stamp_opinion-text">
      <div>{{ opinionForm.text }}</div>
      <div class="stamp_opinion-signBox">
        <div class="stamp_opinion-sign" v-if="signPic">
          <img alt="" :src="`data:image/png;base64,${signPic}`"/>
        </div>
        <div class="stamp_opinion-userName" v-else>{{ opinionForm.userName }}</div>
        <div class="stamp_opinion-userName">{{ formatTime(opinionForm.time, 'YYYY.MM.DD') }}</div>
      </div>
    </div>
  </div>
</template>

<style lang="scss">
.stamp_opinion-text {
  position: fixed;
  top: 110vh;
  background: #ffffff;
  min-width: 200px;
  max-width: 19.7cm;
  font-size: 22px;
  font-family: FangSong_GB2312, FangSong, FZFangSong, SimSun, CESI_SS_GB2312, STSong, CESI_SS_GB18030, FZSongS-Extended, serif;
  padding: 5px;
  //letter-spacing: 1px;
  color: #222222;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  .stamp_opinion-signBox {
    align-self: flex-end;
  }
  .stamp_opinion-userName {
    text-align: center;
  }
  .stamp_opinion-sign {
    text-align: center;
    margin-bottom: -10px;
    margin-top: 2px;
    img {
      height: 34px;
      //height: 26px;
    }
  }
}
</style>
